<template>
  <div class="product-detail">
    <van-swipe class="product-swipe" :autoplay="3000">
      <van-swipe-item v-for="image in product.images" :key="image">
        <van-image :src="image" fit="cover" />
      </van-swipe-item>
    </van-swipe>

    <div class="product-info">
      <div class="price-section">
        <div class="price">¥{{ product.price }}</div>
        <div class="points">{{ product.points }}积分</div>
      </div>
      <div class="name">{{ product.name }}</div>
      <div class="desc">{{ product.description }}</div>
    </div>

    <van-cell-group class="detail-group">
      <van-cell title="商品详情" is-link @click="showDetail = true" />
      <van-cell title="规格参数" is-link @click="showSpecs = true" />
    </van-cell-group>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="onClickService" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickCart" />
      <van-action-bar-button type="warning" text="加入购物车" @click="onAddToCart" />
      <van-action-bar-button type="danger" text="立即兑换" @click="onExchange" />
    </van-action-bar>

    <van-popup v-model:show="showDetail" position="bottom" round>
      <div class="popup-content">
        <div class="popup-title">商品详情</div>
        <div class="detail-content" v-html="product.detail"></div>
      </div>
    </van-popup>

    <van-popup v-model:show="showSpecs" position="bottom" round>
      <div class="popup-content">
        <div class="popup-title">规格参数</div>
        <div class="specs-content">
          <van-cell v-for="(value, key) in product.specs" :key="key" :title="key" :value="value" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getProductDetail, exchangeProduct } from '@/api/product'

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false
    }
  },
  methods: {
    async fetchProductDetail() {
      this.loading = true
      try {
        const res = await getProductDetail(this.$route.params.id)
        this.product = res.data
      } catch (error) {
        console.error('获取商品详情失败:', error)
      } finally {
        this.loading = false
      }
    },
    onAddToCart() {
      // TODO: 实现加入购物车逻辑
    },
    async onExchange() {
      try {
        await exchangeProduct(this.product.id)
        // 兑换成功后的处理
      } catch (error) {
        console.error('兑换失败:', error)
      }
    },
    onClickService() {
      // TODO: 实现客服功能
    },
    onClickCart() {
      // TODO: 跳转到购物车页面
    }
  },
  mounted() {
    this.fetchProductDetail()
  }
}
</script>

<style scoped>
.product-detail {
  padding-bottom: 50px;
}

.product-swipe {
  height: 300px;
}

.product-info {
  padding: 15px;
  background: #fff;
}

.price-section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.price {
  font-size: 24px;
  color: #f44;
  font-weight: bold;
  margin-right: 10px;
}

.points {
  color: #999;
  font-size: 14px;
}

.name {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.detail-group {
  margin-top: 10px;
}

.popup-content {
  padding: 20px;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.detail-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.specs-content {
  padding: 0 15px;
}
</style>
